<template>
    <a-modal v-model:visible="lifeShow" title="生活照上传" :width="850" @ok="lifeOk" :destroyOnClose="true" :z-index="20" @Cancel="outLife">
        <div style="margin-bottom:20px;font-size:16px">
            <span style="color:#333;margin-right:10px">当前生活照状态：</span>
            <template v-if="lifeDataInfo">
                <span :style="{ color: share.getExamineState(lifeDataInfo.examine)[1] }">{{
                    share.getExamineState(lifeDataInfo.examine)[0] }}</span>
            </template>
            <span v-else style="color:gray">未上传生活照</span>
        </div>
        <a-upload :fileList="lifeData" :maxCount="5" list-type="picture-card" :beforeUpload="lifeBefore"
            @remove="removeLife">
            <div>
                <plus-outlined />
                <div style="margin-top: 8px">Upload</div>
            </div>
        </a-upload>
    </a-modal>
</template>

<!-- 技师生活照模块 -->
<script setup>
import { ref, defineProps,defineEmits,watch} from 'vue';
import { PlusOutlined } from '@ant-design/icons-vue';
import { techStatAPI,imageAPI } from '../../../../api/management';
import { useUserData } from '../../../../stores/userData';
import { message } from 'ant-design-vue';
import share from '../../../../util/commnet'
const lifeShow = ref(false);    //是否显示图层
const store = useUserData();    //pinia
const lifeDataInfo = ref({});   //技师生活照数据库数据
const lifeData = ref([]);       //照片展示区
const lifeUp = ref([]);         //照片上传区
const lifeUid = ref('');        //生活照技师的uid
const emit = defineEmits(['setShow'])       //关闭组件的方法
const pros = defineProps({
    uid:{                       //拿到uid
        type:String,
        default:''
    },
    shows:{                     //是否关闭组件
        type:Boolean,
        default:false
    }
})




watch(                              //监听是否关闭生活照上传模块
    ()=>pros.shows,
    async(n,o)=>{
        
        if(n && pros.uid){                      //当需要显示模块且存在uid时 拉取数据
            lifeUp.value = [];                  
            lifeData.value = [];
            lifeUid.value = pros.uid;
            let res  =  await techStatAPI(`selLife|${pros.uid}|${store.data.token}|${store.data.uuid}|${store.data.phone}`);
            if (!res || res.code == 406) {
                message.error("账号失效");
                router.replace({ name: 'login' });
                return;
            } else if (res.code != 200) {
                message.error(res.message);
                return
            }
            lifeDataInfo.value = res.data[0];
            if(res.data[0]){
                res.data[0].lifephoto.split(',').forEach(e => {
                    lifeData.value.push({url:share.http+`/${res.data[0].dir}/${res.data[0].technician_uid}/`+e,img:e})
                });
            }
        }
        lifeShow.value = n;     //打开模块
    }
)

const lifeBefore = (f) => {                 //上传图片时
    if (!lifeUp.value.every(item => item.name != f.name)) {
        message.error("该生活照名称重复");
        return
    }
    if (!share.imgType.includes(f.type)) {
        message.error("图片仅支持png,jpg,jpeg格式");
        return;
    }
    if (lifeUp.value.length == 5 || lifeData.value.length == 5) {
        message.error("生活照最多五个");
        return;
    }
    lifeUp.value.push(f);
    lifeData.value.push({ url:URL.createObjectURL(f), data: f });
    return false;
};

const removeLife = (file) => {              //当点击删除时
    
    const index = lifeData.value.indexOf(file);
    if (index !== -1) {
        lifeUp.value = lifeUp.value.filter(item => item != lifeData.value[index]?.data);
        lifeData.value.splice(index, 1);
    }
    
}

const lifeOk = async()=>{
    if(lifeData.value.length !=0 ){   //当修改或者上传了生活照时
        let yuanImage = lifeData.value.filter(item=>item.img).map(item=>item.img);  //获取到所有的已经上传过的技师生活照
        let lifeImageUp = await imageAPI(`lifeSet|${lifeUid.value}|${share.life}|${yuanImage}|${store.data.token}|${store.data.uuid}|${store.data.phone}`,lifeUp.value);
        
        if (lifeImageUp.code == 406) {
            message.error("账号失效");
            router.replace({ name: 'login' });
            return;
        } else if (lifeImageUp.code != 200) {
            message.error(lifeImageUp.message);
            return
        }
        let res = await techStatAPI(`lifeSet|${lifeUid.value}|${share.life}|${lifeImageUp.file}|${store.data.token}|${store.data.uuid}|${store.data.phone}`);
        console.log(res);
        if (!res || res.code == 406) {
            message.error("账号失效");
            router.replace({ name: 'login' });
            return;
        } else if (res.code != 200) {
            message.error(res.message);
            return
        }
        message.success(res.message);
        emit('setShow',false);
    }
}


const outLife = ()=>{               //当点击蒙层或者取消时
    emit('setShow',false)           //传递父组件关闭
}

</script>